<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .btn{
            outline:none;
            border:none;
            cursor:pointer;
            padding:5px 12px;
        }
        .btn-text{
            color:#409eff;
            background-color:transparent;
        }
        .btn-text:hover{
            color:rgb(30, 185, 165);
        }
        .fly-table{
            width:400px;
            text-align: left;
            line-height: 42px;
            border:1px solid #eee;
            user-select:none;
        }
    </style>
</head>
<body>

    <!-- <div id="app">
        <slot-test>
            <p>使用插槽分发内容</p>
            <h1 slot="header">插槽测试！</h1>
            <p slot="none">在组件中，没有指定插槽名称的元素的将被置于默认插槽中</p>
            <p slot="none">指定到不存在的插槽中的内容将不会被显示</p>
        </slot-test>
    </div>
    <script type="text/javaScript"  charset="UTF-8" src="../JS文件/vue.js"></script>
    <script language="javaScript">
        let SlotTest={
            template:'<div>'+
                '<slot name="header">相当于占位元素，因此这些文字也不会被渲染</slot>'+'<slot></slot>'+ '</div>'
        }
        let vm = new Vue({
            el:'#app',
            components:{
                SlotTest
            }   
        }) 
    </script>-->
    <div id="app">
        <h2>Fly Table Component</h2>
        <button class="btn btn-text" title="点击使数组倒序" @click="handleReverse"> 
            倒序
        </button>
        <fly-table :fields="fields":goods="goods">
            <template slot-scope="{row,col}">
                <span v-if="col.prop !=='operate'">{{row[col.prop]}}</span>
                <button class="btn btn-text" v-else @click="handleMarked(row)">切换标记</button>
            </template>
        </fly-table>
    </div>
    <script type="text/javaScript"  charset="UTF-8" src="../JS文件/vue.js"></script>
    <script type="text/javaScript">
        let FlyTable={
            props:{
                fields:{
                    type:Array,
                    default(){
                        return[]
                    }
                }
            },
        goods:{
            type:Array,
            default(){
                
            return[]
            }
        }
    },

    template:function(){

        return :'<table class="fly-table">\n'+
            '<tr>\n'+
            '<th \n'+
            'v-for="(col,cIndex) in fields"\n'+
            ':key="cIndex">\n'+
            '{{ col.label }}\n'+
            '</th>\n'+
            '<tr>\n'+
            '<tr\n'>+
            'v-for="(row,rIndex) in goods"\n'+
            ':key="rIndex"\n'+
            ':style="{color:row.isMarked ? \'#ea4335\':\'\'}">\n'+
            '<td\n'+
            'style="border-top:1px solid #eee"\n'+
            'v-for="(col,cIndex) in fields"\n'+
            ':key="cIndex">\n'+
            '<slot :row="row" :col="col"></slot>\n'+
            '</td>\n'+
            '</tr>\n'+
            '</table>'
            }()
    }
    let vm = new Vue({
        el:'#app',
        components:{FlyTable},
        data(){
            return {
                fields:[
                    {
                        label:'名称',
                        prop:'name'
                    }
                    {
                        label:'数量',
                        prop:'quantity'
                    },  {
                        label:'价格',
                        prop:'price'
                    },  {
                        label:'',
                        prop:'operte'
                    }
                ]
                goods:[
                    {
                        label:'苹果',
                        quantity:200,
                        price:6.8,
                        isMarked:false
                    },  
                    {
                        label:'西瓜',
                        quantity:200,
                        price:4.8,
                        isMarked:false
                    },  
                    {
                        label:'榴莲',
                        quantity:200,
                        price:22.8,
                        isMarked:false
                    }
                ]
            }
        }，
        methods:{
            handleReverse(){
                this.goods.reverse()

            },
            handleMarked(row){
                row.isMarked = !row.isMarked
            }
        }
    })
    </script>
    
</body>
</html>